import { useEffect, useRef, useState } from "react";

// 严格模式下 useEffect 的依赖项 是 [],依旧会执行两次

// 真正仅在首次加载的时候执行，看下方逻辑

function App() {
  //定义计数的状态
  const [count, setCount] = useState(0);
  const appRenderCount = useRef(0);
  //使用 Ref记录组件是否已经加载过了
  const hasLoaded = useRef(false);
  console.log(`App组件渲染的次数:${++appRenderCount.current}`);
  useEffect(() => {
    console.log(`Effect执行次数:${count}`);
    //仅在首次加载的时候执行
    if (!hasLoaded.current) {
      console.log(`Effect首次执行`);
      hasLoaded.current = true;
    }
    return () => {
      console.log(`Effect清理`);
    };
  }, []);
  return (
    <div>
      <p>当前计数:{count}</p>
      <button onClick={() => setCount((count) => count + 1)}>+</button>
    </div>
  );
}
export default App;
